<template>
  <div class="app-container">
    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column width="180px" align="center" label="Date">
        <template slot-scope="scope">
          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>

      <el-table-column width="120px" align="center" label="Author">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>

      <el-table-column width="100px" label="Importance">
        <template slot-scope="scope">
          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon" />
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="Status" width="110">
        <template slot-scope="{row}">
          <el-tag :type="row.status | statusFilter">
            {{ row.status }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column min-width="300px" label="Title">
        <template slot-scope="{row}">
          <router-link :to="'/example/edit/'+row.id" class="link-type">
            <span>{{ row.title }}</span>
          </router-link>
        </template>
      </el-table-column>

      <el-table-column align="center" label="Actions" width="120">
        <template slot-scope="scope">
          <router-link :to="'/example/edit/'+scope.row.id">
            <el-button type="primary" size="small" icon="el-icon-edit">
              Edit
            </el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <el-dialog
      :title="modalConfig.modalTitle"
      :visible.sync="modalConfig.modalShow"
      width="40%"
      :before-close="dialogVisibleF"
    >
      <el-form
        ref="ruleForm"
        label-position="right"
        size="small"
        :model="form1"
        :rules="modalConfig.rules"
        label-width="160px"
        @submit.native.prevent
      >
        <el-form-item label="标准科室编码:" prop="deptCode">
          <el-input
            v-model="form1.deptCode"
            placeholder="请输入标准科室编码"
            style="width:80%"
            maxlength="20"
            :disabled="modalConfig.modalType === 'edit'"
          />
        </el-form-item>
        <el-form-item label="标准科室名称:" prop="deptName">
          <el-input
            v-model="form1.deptName"
            placeholder="请输入标准科室名称"
            style="width:80%"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item label="疾病对照:" prop="disease">
          <template>
            <el-input
              v-model="form1.disease"
              placeholder="请输入疾病"
              style="width:80%"
              maxlength="30"
              type="textarea"
              autosize
            />
            <el-button type="danger" @click="addDisease()">添加</el-button>
          </template>
        </el-form-item>
        <div v-if="showDisease" class="showDisease">
          <el-form-item label="添加疾病:">
            <el-input v-model.trim="form1.soloDisease" placeholder="请输入疾病" style="width:60%" maxlength="20" />
            <el-button type="success" class="btn" @click="saveDisease">确定</el-button>
            <el-button type="danger" class="btn" @click="showDisease=false">取消</el-button>
          </el-form-item>
        </div>
        <el-form-item
          v-for="(domain, index) in form1.domains"
          :label="`${index === 0 ? '疾病对照' : ''}`"
          :key="domain.key"
          :prop="'domains.' + index + '.value'"
          :rules="{
            required: true, message: '请输入疾病', trigger: 'blur'
          }"
        >
          <el-input v-model="domain.value" style="width: 50%" placeholder="请输入疾病" />
          <!-- <i class="el-icon-circle-plus-outline"></i>
          <i class="el-icon-remove-outline"></i>-->
          <el-button size="small" @click.prevent="removeDomain(domain)" v-if="form1.domains.length > 1">删除</el-button>
          <el-button size="small" @click.prevent="addDomain()" v-if="index === form1.domains.length - 1">添加</el-button>
        </el-form-item>
        <!-- 嵌套重置表单会报错 -->
        <!-- <el-form-item label="疾病对照:" prop="domains">
          <el-form-item
            v-for="(domain, index) in form1.domains"
            :key="domain.key"
            :prop="'domains.' + index + '.value'"
            :rules="{
              required: true, message: '请输入疾病', trigger: 'blur'
            }"
          >
            <el-input v-model="domain.value" style="width: 50%" placeholder="请输入疾病" />
            &lt;!&ndash; <i class="el-icon-circle-plus-outline"></i>
            <i class="el-icon-remove-outline"></i>&ndash;&gt;
            <el-button size="small" @click.prevent="removeDomain(domain)" v-if="form1.domains.length > 1">删除</el-button>
            <el-button size="small" @click.prevent="addDomain()" v-if="index === form1.domains.length - 1">添加</el-button>
          </el-form-item>
        </el-form-item>-->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleF">取 消</el-button>
        <el-button type="primary" @click="saveStandardDepartment()">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList } from '@/api/article'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'ArticleList',
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20
      },
      form1: {
        deptCode: '',
        deptName: '',
        logo: '',
        disease: '',
        soloDisease: '',
        domains: [{
          value: ''
        }]
      },
      modalConfig: {
        modalTitle: '',
        modalType: 'create',
        modalShow: false,
        labelWidth: '120px',
        rules: {
          deptCode: [
            { required: true, message: '请输入标准科室编码', trigger: 'blur' },
            { pattern: /^[a-zA-Z]+\d{1,20}$/, message: '标准科室编码格式只能字母+数字', trigger: 'blur' }
          ],
          deptName: [
            { required: true, message: '请输入标准科室名称', trigger: 'blur' }
          ],
          disease: [
            { required: true, message: '请输入疾病对照', trigger: 'blur' }
          ]
        }
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    dialogVisibleF() {
      this.$refs['ruleForm'].resetFields()
      this.modalConfig.modalShow = false
    },
    removeDomain(item) {
      const index = this.form1.domains.indexOf(item)
      if (index !== -1) {
        this.form1.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.form1.domains.push({
        value: '',
        key: Date.now()
      })
    },
    saveStandardDepartment() {},
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
